<template>
  <div >
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3">拒绝原因：</span>
          <span class="c_7" v-if="this.adminRefuseReason=='商品没问题，买家未举证'">商品没问题，买家未举证</span>
          <span class="c_7" v-if="this.adminRefuseReason=='商品没问题，买家举证无效'">商品没问题，买家举证无效</span>
          <span class="c_7" v-if="this.adminRefuseReason=='退款金额不对，买家要求过高'">退款金额不对，买家要求过高</span>
          <span class="c_7" v-if="this.adminRefuseReason=='申请时间已超售后服务时限'">申请时间已超售后服务时限</span>
          <span class="c_7" v-if="this.adminRefuseReason=='商品退回后才能退款'">商品退回后才能退款</span>
          <span class="c_7" v-if="this.adminRefuseReason=='货物已在物流中'">货物已在物流中</span>
          <span class="c_7" v-if="this.adminRefuseReason=='买家已签收'">买家已签收</span>
          <span class="c_7" v-if="this.adminRefuseReason=='其他'">其他</span>
          <span class="c_4" v-if="this.adminRefuseReason==''">必填</span>
        </div>

        <div class="c_2" @click="popup" v-if="this.adminRefuseReason==''">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup" v-if="this.adminRefuseReason!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3">拒绝说明：</span>
          <span class="cc"  @change="note">
              <van-field v-model="adminRefundNote " placeholder="必填" style="font-size:13px;margin-left:-60px;margin-top:20px;width:200px;"/>
          </span>
        </div>
      </div>
    </div>
    <!-- 已收货 -->
    <van-popup v-model="showReason1" position="bottom" :style="{ height: '65%' }" >
      <div class="reason_title">拒绝原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>商品没问题，买家未举证</div>
          <div>
            <van-radio name="商品没问题，买家未举证" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason1"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>商品没问题，买家举证无效</div>
          <div>
            <van-radio name="商品没问题，买家举证无效" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason2"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>退款金额不对，买家要求过高</div>
          <div>
            <van-radio name="退款金额不对，买家要求过高" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason3"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>申请时间已超售后服务时限</div>
          <div>
            <van-radio name="申请时间已超售后服务时限" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason4"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>商品退回后才能退款</div>
          <div>
            <van-radio name="商品退回后才能退款" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <!-- 未收货 -->
    <van-popup v-model="showReason2" position="bottom" :style="{ height: '65%' }" >
      <div class="reason_title">拒绝原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>货物已在物流中</div>
          <div>
            <van-radio name="货物已在物流中" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason7"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>买家已签收</div>
          <div>
            <van-radio name="买家已签收" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason8"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>商品退回后才能退款</div>
          <div>
            <van-radio name="商品退回后才能退款" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>已发货，请承担发货运费</div>
          <div>
            <van-radio name="已发货，请承担发货运费" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason9"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="adminRefuseReason" @click="refundReason6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
      showReason1: false,
      showReason2: false,
      showreason: false,
      radio1: "",
      radio2: "",
      reason: "",
      reason1: false,
      value:'',
      adminRefuseReason:'',//拒绝原因
      adminRefundNote:'',//备注
      goodsState:'2',
      detailList:[],
      url1: this.$api+'/marketorderservice/api/v1/market/refund/log/list',
    };
  },
  // props:['goodsState','detailList'],
  methods: {
    popup() {
      if(this.goodsState=='1'){
        this.showReason2=true
      }else if(this.goodsState=='2'){
        this.showReason1=true
      }else{}
    },
    close() {
      this.showReason1 = false;
      this.showReason2 = false;
    },
    refundReason1(){
      this.adminRefuseReason = '商品没问题，买家未举证'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason2(){
      this.adminRefuseReason = '商品没问题，买家举证无效'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason3(){
      this.adminRefuseReason = '退款金额不对，买家要求过高'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason4(){
      this.adminRefuseReason = '申请时间已超售后服务时限'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason5(){
      this.adminRefuseReason = '商品退回后才能退款'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason6(){
      this.adminRefuseReason = '其他'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason7(){
      this.adminRefuseReason = '货物已在物流中'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason8(){
      this.adminRefuseReason = '买家已签收'
      this.$emit('func',this.adminRefuseReason)
    },
    refundReason9(){
      this.adminRefuseReason = '已发货，请承担发货运费'
      this.$emit('func',this.adminRefuseReason)
    },
    note(){
      this.$emit('func1',this.adminRefundNote)
    },
  },
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.refundId = this.$router.currentRoute.query.refundId;
  }
};
</script>

<style scoped="">
.a {
  padding: 15px;
}
.b {
  width: 100%;
}
.text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.txt {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  float: right;
}
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  margin-left: 15px;
  color: #aaa;
  display:flex;
  font-size: 13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 13px;
  color: #333333;
  display:flex;
}
.cc{
  margin-left: 70px;
  margin-top: -20px;
  color: #aaa;
  display:flex;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.van-cell {
  padding: 0;
}
/* .reason_title {
  text-align: center;
  padding: 25px 0;
  font-size: 20px;
} */
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
</style>